/*
 * @Author: your name
 * @Date: 2022-04-01 18:42:14
 * @LastEditTime: 2022-04-07 19:15:15
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \lalalal\src\views\finance\table\modify.jsx
 */
import React, { useState } from 'react';
import { Modal, Button, Form, Select, Input, DatePicker, Upload, Row, Col } from 'antd';
import AddInClassfiy from './addState/addInClassfiy'
import './modify.css';
import {
    EditOutlined,
} from '@ant-design/icons';

const { Option } = Select;
const Modify = () => {
    //模态框
    const [isModalVisible, setIsModalVisible] = useState(false);
    //收支类别
    const [incomeTypeList, setIncomeTypeList] = useState([
        {
            id: 'in1',
            name: '产品续费'
        },
        {
            id: 'in2',
            name: '其他'
        },
        {
            id: 'in3',
            name: '维护费'
        },
    ])
    //资金账户
    const [accountList, setaccountList] = useState([
        {
            id: 'ac1',
            name: '默认账户'
        }
    ])
    //经办人
    const [managersList, setManagersList] = useState([
        {
            id: 'ma1',
            name: '超级管理员'
        },
        {
            id: 'ma2',
            name: '管理员'
        }
    ])
    //业务员
    const [salesmanList, setSalesmanList] = useState([
        {
            id: 'ma1',
            name: '超级管理员'
        },
        {
            id: 'ma2',
            name: '管理员'
        }
    ])
    //模态框
    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = (e) => {
        setIsModalVisible(false);
        console.log(e);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    //表单
    const onFinish = (values) => {
        console.log('Success:', values);
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    //选择文件
    const [fileList, setFileList] = useState([])
    const handleChange = () => {

    }
    const props = {
        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
        onChange: handleChange,
        multiple: true,
    };

    //新增收支类别
    const getAddValue = (newVale) => {
        console.log('++++',newVale);
    }
    return (
        <>
            <Button type="primary" onClick={showModal} icon={<EditOutlined />} size='small' id='btnmodify'>
                修改
            </Button>
            <Modal
                title="修改 收支 记录"
                visible={isModalVisible}
                onOk={handleOk}
                onCancel={handleCancel}
                okText='保存'
                cancelText='关闭'
                width={'550px'}
            >
                <Form
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                    className='modfiy-form'
                >
                    <Row>
                        <Col span={24}>
                            <Form.Item label="收支日期" name="incomeDate">
                                <DatePicker />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Form.Item label="收支类别" name='addClassfiy-group'>
                        <>
                            <Select placeholder='请选择' filelist={incomeTypeList}>
                                <Option value="in0" disabled>请选择</Option>
                                {
                                    incomeTypeList.map(item => {
                                        return <Option value={item.name} key={item.id}>{item.name}</Option>
                                    })
                                }
                            </Select>
                            {/* 新增收支类别 */}
                            <AddInClassfiy incomeTypeList={incomeTypeList} getAddValue={getAddValue}/>
                        </>
                    </Form.Item>


                    <Form.Item label="收支金额" name="incomeMoney">
                        <Input />
                    </Form.Item>

                    <Form.Item label="资金账户" name="account-group">
                        <Select placeholder='请选择' filelist={accountList}>
                            <Option value="ac0" disabled>请选择</Option>
                            {
                                accountList.map(item => {
                                    return <Option value={item.name} key={item.id}>{item.name}</Option>
                                })
                            }
                        </Select>
                    </Form.Item>

                    <Form.Item label="经办人" name="managers-group">
                        <Select placeholder='请选择' filelist={managersList}>
                            <>
                                {/* <Input /> */}
                                <Option value="ma0" disabled>请选择</Option>
                                {
                                    managersList.map(item => {
                                        return <Option value={item.name} key={item.id}>{item.name}</Option>
                                    })
                                }
                            </>
                        </Select>
                    </Form.Item>

                    <Form.Item label="附件" name="accessory">
                        <Input />
                    </Form.Item>

                    <Form.Item label="备注" name="remarks-group">
                        <Upload {...props} fileList={fileList}>
                            <Button style={{ backgroundColor: '#00B7EE', color: 'white' }}>选择文件</Button>
                        </Upload>
                    </Form.Item>

                    <Form.Item name='salesman-group' label="业务员" >
                        <Select placeholder='请选择' filelist={salesmanList}>
                            <>
                                {/* <Input /> */}
                                <Option value="sa0" disabled>请选择</Option>
                                {
                                    salesmanList.map(item => {
                                        return <Option value={item.name} key={item.id}>{item.name}</Option>
                                    })
                                }
                            </>
                        </Select>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    );
}

export default Modify;
